<template>
  <div style="display: flex;width: 100%;align-items: center;flex-direction: column">
            <h1>智慧校园---学生信息管理系统</h1>
    <div style="display: flex;margin-top: 30px;flex-direction: row;justify-content: space-around;width: 100%">
      <div class="rollbox" :class="{'box_rolling':isRolling}" @click="fanzhuan">
        <div class="rollbox_front" style="display: flex;justify-content: center;align-items: center;flex-direction: column">
          <h2>组长：苟森</h2>
          <p>学院：讯飞人工智能学院</p>
          <p>专业：智能科学与技术</p>
          <p>学号：2021900423</p>
          <p>班级:21智科一班</p>
        </div>
        <!-- 后面div -->
        <div class="rollbox_behind">
          <div class="contentbox">
            <img src="@/assets/学生管理系统/Animation - 1701104702791.gif"/>
          </div>
        </div>
      </div>
      <div class="rollbox" :class="{'box_rolling':isRolling1}" @click="fanzhuan1">
        <div class="rollbox_front" style="display: flex;justify-content: center;align-items: center;flex-direction: column">
          <h2>组员：田雨凌</h2>
          <p>学院：讯飞人工智能学院</p>
          <p>专业：智能科学与技术</p>
          <p>学号：2021900438</p>
          <p>班级:21智科一班</p>

        </div>
        <!-- 后面div -->
        <div class="rollbox_behind">
          <div class="contentbox">
            <img src="@/assets/学生管理系统/Animation - 1702149102983.gif" />
          </div>
        </div>
      </div>
      <div class="rollbox" :class="{'box_rolling':isRolling2}" @click="fanzhuan2">
        <div class="rollbox_front" style="display: flex;justify-content: center;align-items: center;flex-direction: column">
          <h2>组员：方澜航</h2>
          <p>学院：讯飞人工智能学院</p>
          <p>专业：智能科学与技术</p>
          <p>学号：2021900422</p>
          <p>班级:21智科一班</p>

        </div>
        <!-- 后面div -->
        <div class="rollbox_behind">
          <div class="contentbox">
            <img src="@/assets/学生管理系统/Animation - 1702148359889.gif"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isRolling = ref(false)
function fanzhuan(){
  isRolling.value =!isRolling.value
}
const isRolling1 = ref(false)
function fanzhuan1(){
  isRolling1.value =!isRolling1.value
}
const isRolling2 = ref(false)
function fanzhuan2(){
  isRolling2.value =!isRolling2.value
}
</script>

<style lang="scss" scoped>

h1 {
  /*box-shadow: #c9c4c4 10px 10px 10px 10px;*/
  margin-top: 50px;
  font-size: 50px;
  font-family: 隶书;
  /* 本例12个文字(加标点符号)；有多少个文字，width就是多少个em */
  /*width: 14.5em;*/
  /* 加上两个动画，一个是打字动画，使用steps让字一个一个的出现，
   注意step和字数保持一致，光标动画也是同理，*/
  animation: typingWords 10s steps(12) infinite, cursor 0.5s steps(1) infinite;
  /* 要设置不允许换行，且溢出隐藏 */
  white-space: nowrap;
  overflow: hidden;
  /* 使用右边框作为打印的指针光标 */
  border-right: 1px solid #000;

}

@keyframes typingWords {
  0% {
    width: 0;
  }
  50% {
    width: 13.5em;
  }
  100% {
    width: 13.5em;
  }
}

@keyframes cursor {
  0%, 49% {
    border-color: transparent;
  }
  50%, 100% {
    border-color: #000;
  }
}

  .rollbox{
    position: relative;
    perspective: 1000px;
    /*  让没有背景了，因为统一设置了 */
    background: inherit;
    /*  让图片是相对于本身 */
    position: relative;
    width: 31%;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 11;

    &_front{
      content: "";
      position: absolute;
      background-color: #b8cfe3;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      box-shadow:30px 30px 30px -10px rgba(153, 149, 149, 0.92),
      inset 15px 15px 10px rgba(255, 255, 255, 0.75),
      -15px -15px 35px rgba(255, 255, 255, 0.55),
      inset -1px -1px 10px rgba(0, 0, 0, 0.8);
      border-radius: 50px;
      z-index: -1;
    }
    &_front,
    &_behind{
      transform-style: preserve-3d; //表示所有子元素在3D空间中呈现
      backface-visibility: hidden;  //元素背面向屏幕时是否可见
      transition-duration:1s;
      transition-timing-function:'ease-in';
      background-color: #b8cfe3;
      box-shadow:30px 30px 30px -10px rgba(153, 149, 149, 0.92),
      inset 15px 15px 10px rgba(255, 255, 255, 0.75),
      -15px -15px 35px rgba(255, 255, 255, 0.55),
      inset -1px -1px 10px rgba(0, 0, 0, 0.8);
      border-radius: 50px;
     .contentbox{
       display: flex;
       justify-content: center;
       align-items: center;
       transform: translate(0,75%);
     }
    }
    &_behind{
      transform: rotateY(180deg);
      visibility:hidden;  //元素不可见，但占据空间
      position: absolute;
      top:0;
      bottom:0;
      right: 0;
      left: 0;
    }
  }

  .box_rolling{
    .rollbox_front{
      transform: rotateY(180deg);
      visibility:hidden;
    }
    .rollbox_behind{
      transform: rotateY(360deg);
      visibility:visible;
    }
  }


</style>